<template>
	<view class="cu-list grid col-3" :class="['col-3','']">
		<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" > 
			<view :class="['cuIcon-1','text-' + item.color]">
				<image src="" :src="item.src" style="width: 25px; height: 25px;"></image>
				<view class="cu-tag badge" v-if="item.badge!=0">
					<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
				</view> 
			</view>
			<text>{{item.name}}</text>
		</view> 
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				cuIconList: [{
					src: '/static/images/icons/icon_csharp.png',
					color: 'red', 
					badge: 11,
					name: '后台'
				}, {
					src: '/static/images/icons/icon_test.png',
					color: 'orange',
					badge: 1,
					name: '测试'
				}, {
					src: '/static/images/icons/icon_web.png',
					color: 'yellow',
					badge: 1, 
					name: '前端'
				}, {
					src: '/static/images/icons/icon_setting.png',
					color: 'cyan',
					badge: 2,
					name: '运 维' 
				}, {
					src: '/static/images/icons/icon_docs.png',
					color: 'olive',
					badge: 292,
					name: '在线测评'
				}, {
					src: '/static/images/icons/icon_db.png',
					color: 'blue',
					badge: 0,
					name: '数据库'
				}, {
					src: '/static/images/icons/icon_word.png',
					color: 'purple',
					badge: 0,
					name: '我的文档'
				}, {
					src: '/static/images/icons/icon_testing.png',
					color: 'purple',
					badge: 0,
					name: '面试题'
				}, {
					src: '/static/images/icons/icon_book.png',
					color: 'purple', 
					badge: 10,
					name: '经典文学'
				}
				]
			}
		},
		props:{
			
			
			
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
